package myJs.cps

import myJs.myPkg.reactHookForm._
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.web.html._

import scala.collection.immutable.SeqMap
import scala.scalajs.js
import myJs.Implicits._
import slinky.core.facade.Fragment
import typings.csstype.csstypeStrings

/** Created by yz on 3/11/2020
  */
@react object SelectInlineNoFormGroupCp {
  case class Props(
      useForm: UseFormRT,
      value: String = "",
      onChange: js.UndefOr[String => Unit] = js.undefined,
      label: String,
      name: String,
      optionMap: SeqMap[String, String],
      questionInfo: String = "",
      inputWidth: Int = 3,
      show: Boolean = true
  )

  val component = FunctionalComponent[Props] { props =>
    val displayStr = if (props.show) csstypeStrings.block else csstypeStrings.none
    div(
      style := Style(display = displayStr),
      label(
        className := "control-label col-sm-2",
        s"${props.label}",
        if (props.questionInfo.nonBlank) {
          span(
            className := "",
            a(
              `type` := "button",
              className := "selfQuestion",
              title := "Note",
              data - "container" := "body",
              data - "toggle" := "popover",
              data - "html" := "true",
              data - "placement" := "left",
              data - "content" := props.questionInfo,
              data - "trigger" := "click",
              i(className := "fa fa-question-circle-o")
            )
          )
        } else null,
        ":"
      ),
      div(
        className := s"col-sm-${props.inputWidth}",
        PureSelectCp(
          name = props.name,
          value = props.value,
          onChange = props.onChange,
          optionMap = props.optionMap
        )
      )
    )

  }

}
